<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		body{
			background: #aaa;
			text-align: center;
		}
		canvas{
			background: #fff;
		}
	</style>
</head>

<body>
	<canvas id="cans" width="800px" height="800px">
		
	</canvas>
	<input type="button" id="btn" value="清空画布" name="">
	
  <script>
		window.onload=function(ev){
			let clear = document.getElementById('btn');
			let cans=document.getElementById('cans');
			let cs=cans.getContext('2d');
			let isdraw=false;
			let lastX,lastY;
			cans.onmousedown=function(ev){
				isdraw=true;
				lastX=ev.offsetX;
				lastY=ev.offsetY;
				cs.moveTo(lastX,lastY);
				cans.onmousemove=function(ev){
					if(isdraw){			
						cs.lineTo(ev.offsetX,ev.offsetY);
						cs.stroke();
					}
				}
				// cans.height=cans.height;//清空
			}
			cans.onmouseup=function(){
				isdraw=null;
				cs.onmousedown=null;
				cs.onmousemove=null;
			};
			clear.addEventListener('click',function(){
				cans.height=cans.height;
			})
		}
  </script>
</body>
</html>
